<template>
    <div class="swipercom">
      <!-- 轮播图区域 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="orange">
     <van-swipe-item v-for="(item) in bannerList.value" :key="item.id">
       <img v-lazy="item.pic" class="imgs">
     </van-swipe-item>
    </van-swipe>
    </div>
</template>

<script>
import {getBanner} from '@/api/index.js'
import {onMounted,reactive} from 'vue'
export default {
  name:"swiperCom",
  setup(){
    //变量
    //轮播图的列表
    let bannerList=reactive([])
    //函数
    async function getBannerList(){
      const {data:res}=await getBanner(1)
      bannerList.value=res.banners
      console.log(bannerList);
    }
    onMounted(()=>{
      getBannerList()
    })
    return{
      bannerList
    }
  }
}
</script>

<style lang="less" scoped>
 /* 轮播图样式 */
 .swipercom{
   width: 7.5rem;
   .my-swipe{
   width:7.1rem;
   height: 3rem;
   margin:0.2rem auto;
   border-radius: 0.1rem;
   .my-swipe .van-swipe-item {
    margin:0 auto;
    width: 100%;
    font-size: 0.2rem;
    color: #fff;
    line-height: 3rem;
    text-align: center;
    background-color: #39a9ed;
    
}
 }
 }
 
 .imgs{
   width: 100%;
   height: 100%;
 }
</style>